<template>
    <div class="main-container">
        <!-- 实时概况 -->
        <el-card shadow="never" class="!border-none">
            <template #header>
                <span class="text-lg font-extrabold mr-[10px]">{{t('realtimeOverview')}}</span>
                <span class="text-sm text-[#a19f98]">{{t('updateTime')}}</span>
                <span class="text-sm text-[#a19f98]">{{ time }}</span>
            </template>
            <el-row>
                <el-col :span="6">
                    <div class="ml-[10px]">
                        <div class="text-sm text-[#a19f98] leading-8">
                            <el-statistic :value="statToday.order_num">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        <span class="mr-[5px]">{{t('todayOrderCount')}}</span>
                                        <el-tooltip class="box-item" effect="light" :content="t('todayOrderCount')" placement="top">
                                            <el-icon>
                                                <QuestionFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8">
                            <span>{{t('yesterday')}}</span>
                            <span>{{statYesterday.order_num}}</span>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8 mt-[15px]">
                            <el-statistic :title="t('orderCount')" :value="statTotal.order_num" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="ml-[10px]">
                        <div class="text-sm text-[#a19f98] leading-8">
                            <el-statistic :value="statToday.sale_money">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        <span class="mr-[5px]">{{t('todayOrderSale')}}</span>
                                        <el-tooltip class="box-item" effect="light" :content="t('todayOrderSale')" placement="top">
                                            <el-icon>
                                                <QuestionFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8">
                            <span>{{t('yesterday')}}</span>
                            <span>{{statYesterday.sale_money}}</span>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8 mt-[15px]">
                            <el-statistic :title="t('salesTotal')" :value="statTotal.sale_money" />
                        </div>
                    </div>
                </el-col>
                <!-- <el-col :span="6">
                    <div class="ml-[10px]">
                        <div class="text-sm text-[#a19f98] leading-8">
                            <el-statistic :value="statToday.refund_money">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        <span class="mr-[5px]">{{t('todayAddMemberCount')}}</span>
                                        <el-tooltip class="box-item" effect="light" :content="t('todayAddMemberCount')" placement="top">
                                            <el-icon>
                                                <QuestionFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8">
                            <span>{{t('yesterday')}}</span>
                            <span>{{statYesterday.refund_money}}</span>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8 mt-[15px]">
                            <el-statistic :title="t('memberTotal')" :value="statTotal.refund_money" />
                        </div>
                    </div>
                </el-col> -->
                <el-col :span="6">
                    <div class="ml-[10px]">
                        <div class="text-sm text-[#a19f98] leading-8">
                            <el-statistic :value="statToday.access_sum">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        <span class="mr-[5px]">{{t('todayBrowseCount')}}</span>
                                        <el-tooltip class="box-item" effect="light" :content="t('todayBrowseCount')" placement="top">
                                            <el-icon>
                                                <QuestionFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8">
                            <span>{{t('yesterday')}}</span>
                            <span>{{statYesterday.access_sum}}</span>
                        </div>
                        <div class="text-sm text-[#a19f98] leading-8 mt-[15px]">
                            <el-statistic :title="t('browseTotal')" :value="statTotal.access_sum" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 实时概况 end -->

        <!-- 代办事项 -->
        <el-card shadow="never" class="mt-[15px] !border-none">
            <template #header>
                <span class="text-lg font-extrabold">{{t('agentMatters')}}</span>
            </template>
            <el-row>
                <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/order/index', query: {status: 1}})">
                    <div class="ml-[10px]">
                        <el-statistic :value="statOrder.wait_pay_order">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    <span class="mr-[5px]">{{t('waitPayOrder')}}</span>
                                    <el-tooltip class="box-item" effect="light" :content="t('waitPayOrder')" placement="top">
                                        <el-icon>
                                            <QuestionFilled />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/order/index', query: {status: 2}})">
                    <el-statistic :value="statOrder.wait_delivery_order">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">{{t('waitDeliveryOrder')}}</div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/order/index', query: {status: 3}})">
                    <el-statistic :value="statOrder.wait_take_order">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">{{t('waitTakeOrder')}}</div>
                        </template>
                    </el-statistic>
                </el-col>
                <!-- <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/order/refund'})">
                    <el-statistic :value="statOrder.refund_order">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">退款订单</div>
                        </template>
                    </el-statistic>
                </el-col> -->
                <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/goods/list'})">
                    <el-statistic :value="statGoods.sale_goods_num">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">{{t('saleGoodsNum')}}</div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="4" class="cursor-pointer" @click="router.push({ path: '/shop/goods/list', query: {status: 0}})">
                    <el-statistic :value="statGoods.warehouse_goods_num">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">{{t('warehouseGoodsNum')}}</div>
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </el-card>
        <!-- 代办事项 end -->
        <el-card shadow="never" class="mt-[15px] !border-none">
            <template #header>
                <span class="text-lg font-extrabold">积分统计</span>
            </template>
            <el-row>
                <el-col :span="6">
                    <el-statistic :value="pointsStat.contribution_points">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">总贡献值</div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="pointsStat.available_points">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">总可用积分</div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="pointsStat.gold_coupon">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">总兑换券</div>
                        </template>
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="pointsStat.digital_asset">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">总星星豆</div>
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </el-card>
        <!-- 团队等级人数、分销商数量 -->
        <el-card shadow="never" class="mt-[15px] !border-none">
            <template #header>
                <span class="text-lg font-extrabold">团队等级</span>
            </template>
            <el-row>
                <el-col :span="6" v-for="(item, index) in levelList" :key="item.level_id" :class="{ 'mb-[10px]': index <= 3 }">
                    <el-statistic :value="item.user_num">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">{{ item.level_name}}人数</div>
                        </template>
                    </el-statistic>
                </el-col>
            </el-row>
        </el-card>
        <!-- 用户统计 -->
        <el-row :gutter="15" class="mt-[15px]">
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-lg font-extrabold">新注册用户</span>
                            <el-segmented v-model="newUserDay" :options="newUserList" @change="getShopNewUserStatFn" />
                        </div>
                    </template>
                    <el-statistic :value="newUserNum" class="cursor-pointer" @click="handleMember('newuser')" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-lg font-extrabold">消费用户</span>
                            <div class="flex items-center">
                                <el-select
                                    v-model="consumptionRange"
                                    clearable
                                    placeholder="消费区间"
                                    style="width: 150px"
                                    size="medium"
                                    @change="getShopConsumptionUserStatFn"
                                >
                                    <el-option
                                    v-for="item in consumptionList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                                <el-segmented v-model="consumptionDay" :options="newUserList" class="ml-[10px]" @change="getShopConsumptionUserStatFn" />
                            </div>
                        </div>
                    </template>
                    <el-statistic :value="consumptionNum" class="cursor-pointer" @click="handleMember('consumeuser')" />
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="mt-[15px]">
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <span class="text-lg font-extrabold">复购人员</span>
                    </template>
                    <el-statistic :value="repurchaseNum" class="cursor-pointer" @click="handleMember('byconsumeuser')" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span class="text-lg font-extrabold">未推广人员</span>
                            <el-segmented v-model="unUserDay" :options="unUserList" @change="getShopUnUserStatFn" />
                        </div>
                    </template>
                    <el-statistic :value="unUserNum" class="cursor-pointer" @click="handleMember('notfenxianguser')" />
                </el-card>
            </el-col>
        </el-row>
        <!-- 订单趋势 -->
        <el-row :gutter="15" class="mt-[15px]">
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <span class="text-lg font-extrabold">订单量趋势</span>
                    </template>
                    <div ref="visitStat" :style="{ width: '100%', height: '300px' }"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="never" class="!border-none">
                    <template #header>
                        <span class="text-lg font-extrabold">销售额（元）</span>
                    </template>
                    <div ref="hourStat" :style="{ width: '100%', height: '300px' }"></div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 订单趋势 end -->
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import {
    getShopCountList,
    getShopTodayCountList,
    getShopYesterdayCountList,
    getShopStat,
    getShopOrderStat,
    getShopGoodsStat,
    getShopFenxiaoNumStat,
    getShopNewUserStat,
    getShopConsumptionUserStat,
    getShopRepurchaseUserStat,
    getShopUnUserStat
} from '@/addon/shop/api/shop'
import { getDateRange } from '@/utils/common'
import { getHomepageStatistics } from '@/app/api/distributor'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'

const router = useRouter()
const visitStat = ref<any>(null)
const hourStat = ref<any>(null)

interface statTotalType {
    order_num: [number, string],
    sale_money: [number, string],
    refund_money: [number, string],
    access_sum: [number, string]
}

interface statTodayType {
    order_num: [number, string],
    sale_money: [number, string],
    refund_money: [number, string],
    access_sum: [number, string]
}

interface statYesterdayType {
    order_num: [number, string],
    sale_money: [number, string],
    refund_money: [number, string],
    access_sum: [number, string]
}

interface statOrderType {
    wait_pay_order: [number, string],
    wait_delivery_order: [number, string],
    wait_take_order: [number, string],
    refund_order: [number, string]
}

interface statGoodsType {
    sale_goods_num: [number, string],
    warehouse_goods_num: [number, string]
}

interface statCountType {
    order_num: [number, string],
    time: string,
    sale_money: [number, string]
}

const statTotal = ref<statTotalType|any>([])
const statToday = ref<statTodayType|any>([])
const statYesterday = ref<statYesterdayType|any>([])
const statCount = ref<statCountType|any>([])
const statOrder = ref<statOrderType|any>([])
const statGoods = ref<statGoodsType|any>([])
const pointsStat = ref<any>({})
const levelList = ref<any[]>([]) // 团队各等级人数统计

const newUserDay = ref(7) // 新注册用户统计天数
const newUserNum = ref(0) // 新注册用户统计数量
const consumptionDay = ref(7) // 消费用户统计天数
const consumptionRange = ref() // 消费用户统计范围
const consumptionNum = ref(0) // 消费用户统计数量
const repurchaseNum = ref(0) // 复购人员统计
const unUserDay = ref(7) // 未推广人员统计天数
const unUserNum = ref(0) // 未推广人员统计

const newUserList = ref([
    { label: '7天', value: 7 },
    { label: '15天', value: 15 },
    { label: '30天', value: 30 },
])

const consumptionList = ref([
    { label: '6000~20000', value: 1 },
    { label: '20000~40000', value: 2 },
    { label: '40000~70000', value: 3 },
    { label: '70000以上', value: 4 },
])

const unUserList = ref([
    { label: '7天', value: 7 },
    { label: '15天', value: 15 },
    { label: '30天', value: 30 },
    { label: '180天', value: 180 },
])

const getStatInfoFn = async () => {
    let statTotalData = await (await getShopCountList()).data
    for (let i in statTotalData) {
        statTotalData[i] = Number(statTotalData[i])
    }
    statTotal.value = statTotalData
    statToday.value = await (await getShopTodayCountList()).data
    statToday.value.sale_money = statToday.value.sale_money == '0.00' ? 0 : Number(statToday.value.sale_money)
    statToday.value.refund_money = statToday.value.refund_money == '0.00' ? 0 : Number(statToday.value.refund_money)
    statToday.value.order_num = Number(statToday.value.order_num)
    statToday.value.access_sum = Number(statToday.value.access_sum)
    statYesterday.value = await (await getShopYesterdayCountList()).data
    statOrder.value = await (await getShopOrderStat()).data
    statGoods.value = await (await getShopGoodsStat()).data
    statCount.value = await (await getShopStat()).data
    pointsStat.value = await (await getHomepageStatistics()).data
    setTimeout(() => {
        drawChart('')
        drawChartTo('')
    }, 20)
}


const drawChart = (item:any) => {
    let value = statCount.value.order_num
    if (item) value = item
    if (!visitStat.value) return
    const visitStatChart = echarts.init(visitStat.value)
    const visitStatOption = ref({
        // title: {
        //     text: '订单量趋势'
        // },
        legend: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        tooltip: {
            trigger: 'axis',
            formatter: (params: any[]) => {
                if (!params.length) return '';
                const date = params[0].axisValue; // 时间
                const data = params[0].data;
                return `${date}<br/>订单量: ${data} 单`;
            }
        },

        series: [
            {
                type: 'line',
                data: []
            }
        ]
    })
    visitStatOption.value.xAxis.data = statCount.value.time
    visitStatOption.value.series[0].data = value
    visitStatChart.setOption(visitStatOption.value)
}

// 获取团队各等级人数统计
const getFenxiaoNumStat = async () => {
    const res = await getShopFenxiaoNumStat()
    levelList.value = res.data || []
}

const drawChartTo = (item:any) => {
    let valueTo = statCount.value.sale_money
    if (item) valueTo = item
    if (!hourStat.value) return
    const hourStatChart = echarts.init(hourStat.value)
    const hourStatOption = ref({
        // title: {
        //     text: '销售额（元）'
        // },
        legend: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        tooltip: {
            trigger: 'axis',
            formatter: (params: any[]) => {
                if (!params.length) return '';
                const date = params[0].axisValue;
                const data = params[0].data;
                return `${date}<br/>销售额: ${data} 元`;
            }
        },
        series: [
            {
                type: 'line',
                data: []
            }
        ]
    })
    hourStatOption.value.xAxis.data = statCount.value.time
    hourStatOption.value.series[0].data = valueTo
    hourStatChart.setOption(hourStatOption.value)
}
const time = ref('')
const nowTime = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hh = checkTime(date.getHours())
    const mm = checkTime(date.getMinutes())
    const ss = checkTime(date.getSeconds())
    function checkTime (i:any) {
        if (i < 10) {
            return '0' + i
        }
        return i
    }
    time.value = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss
}

// 跳转会员列表
const handleMember = (user_type: string) => {
    let query: any = {};
    if (user_type == 'newuser') {
        let range: any = getDateRange(newUserDay.value, 'YYYY-MM-DD HH:mm:ss')
        query = {
            create_time: [range.startDate, range.endDate]
        }
    } else if (user_type == 'consumeuser') {
        query = {
            user_type,
            day: consumptionDay.value,
            min_max: consumptionRange.value,
        }
    } else if (user_type == 'byconsumeuser') {
        query = {
            user_type,
        }
    } else if (user_type == 'notfenxianguser') {
        query = {
            user_type,
            day: unUserDay.value
        }
    }
    router.push({ path: '/admin/member/member', query })
}

// 获取新注册用户统计
const getShopNewUserStatFn = async () => {
    const res = await getShopNewUserStat({
        day: newUserDay.value
    })
    newUserNum.value = res.data
}

// 获取消费用户统计
const getShopConsumptionUserStatFn = async () => {
    const res = await getShopConsumptionUserStat({
        day: consumptionDay.value,
        type: consumptionRange.value
    })
    consumptionNum.value = res.data
}

// 获取复购人员统计
const getShopRepurchaseUserStatFn = async () => {
    const res = await getShopRepurchaseUserStat()
    repurchaseNum.value = res.data
}

// 获取未推广人员统计
const getShopUnUserStatFn = async () => {
    const res = await getShopUnUserStat({
        day: unUserDay.value
    })
    unUserNum.value = res.data
}

onMounted(() => {
    nowTime()
    getStatInfoFn()
    getFenxiaoNumStat()
    getShopNewUserStatFn();
    getShopConsumptionUserStatFn();
    getShopRepurchaseUserStatFn();
    getShopUnUserStatFn();
})
</script>

<style lang="scss" scoped></style>
